<template>
  <div :class="['navItem', 
  currentIndex === index ? currentBgc : '']"
  @click="changeIndex(index)"
  >
    {{name}}
  </div>
</template>

<script>
export default {
  name: 'NavItem',
  props: [
    'name',
    'currentIndex',
    'index',
    'currentBgc',
  ],
  mounted() {
    console.log(this.name);
  },
  methods: {
    changeIndex (index) {
      this.$emit('changeIndex', index)
    } 
  },
}
</script>

<style lang="scss">
.navItem {
  flex: 1;
  height: 100%;
  cursor: pointer;
  line-height: 50px;
  text-align: center;
  &.primary {
    background-color: skyblue;
  }
  &.warn {
    background-color: orange;
  }
}
</style>